<template>
<transition name="et-modal">
  <div class="et-modal-mask">
    <div class="et-modal-wrapper">
      <div class="et-modal-container">

        <div :class="classes">
          <et-icon v-if="icon" :name="icon" />
          <span v-if="title">{{ $t(title) }}</span>
        </div>

        <div class="et-modal-body">
          <slot name="body"></slot>
        </div>

        <div class="et-modal-footer">
          <div v-if="buttonGroup" class="expanded button-group">
            <a v-for="(btn, idx) in buttonGroup"
               :key="idx"
               :class="['button', { 'primary': btn.isPrimary }]"
               @click="btn.handler">{{ $t(btn.txt) }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
import EtIcon from '../widgets/EtIcon';

export default {

  components: {
    EtIcon
  },

  props: {
    type: {
      type: String,
      default: 'alert',
      validator(value) {
        return ['alert'].indexOf(value) !== -1;
      }
    },
    icon: {
      type: String,
      default: 'alert'
    },
    title: {
      type: String
    },
    buttonGroup: {
      type: Array
    }
  },

  computed: {
    classes() {
      let styles = ['et-modal-header'];
      styles.push(this.type);
      return styles;
    }
  }

};
</script>
